<template>
  <div class="背景">
    <div class="页眉"></div>
    <el-row :gutter="16" type="flex" justify="center">
      <el-col :span="4">
        <div class="文本框" style="height: 800px;">
          <div class="标题">
            富吾财经
          </div>
          <br/>
          <el-menu router>
            <el-menu-item index="/" >
              <div class="小标题">
                富头条
              </div>
            </el-menu-item>
            <el-menu-item index="/Video" >
              <div class="小标题">
                视频
              </div>
            </el-menu-item>
            <el-menu-item index="/Live" >
              <div class="小标题">
                直播
              </div>
            </el-menu-item>
            <el-menu-item index="/" >
              <div class="小标题">
                资讯
              </div>
            </el-menu-item>
            <el-menu-item index="/CreationCenter" >
              <div class="小标题">
                富吾号
              </div>
            </el-menu-item>
            <el-menu-item index="/" >
              <div class="小标题">
                关于我们
              </div>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="文本框">
          <el-menu class="el-menu-demo" mode="horizontal" router="1">
            <el-menu-item index="/Video">返回</el-menu-item>
          </el-menu>
          <h3 style="margin-left: 50px">分类</h3>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="margin-top: 30px;margin-left: 30px">
            <el-tab-pane label="大学" name="1">
              <el-row>
                <el-col :span="12">
                  <el-row style="margin-left: 100px;margin-top: 40px;height: 200px;">
                    <el-col :span="10">
                      <img :src="cover" width="300" height="200" alt="" @click="goToCurriculumVideo">
                    </el-col>
                    <el-col :span="14">
                      <el-row class="视频标题">
                        <div @click="goToCurriculumVideo">视频标题</div>
                      </el-row>
                      <el-row class="视频简介">
                        视频简介
                      </el-row>
                    </el-col>
                    <span class="底端">
                  共 10 节
                  <el-divider direction="vertical"></el-divider>
                  10000人购买
                </span>
                    <span class="价格">
                  60 富吾币
                </span>
                    <span class="原价">
                  300 富吾币
                </span>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row style="margin-left: 100px;margin-top: 40px;height: 200px;">
                    <el-col :span="10">
                      <img :src="cover" width="300" height="200" alt="" @click="goToCurriculumVideo">
                    </el-col>
                    <el-col :span="14">
                      <el-row class="视频标题">
                        <div @click="goToCurriculumVideo">视频标题</div>
                      </el-row>
                      <el-row class="视频简介">
                        视频简介
                      </el-row>
                    </el-col>
                    <span class="底端">
                  共 10 节
                  <el-divider direction="vertical"></el-divider>
                  10000人购买
                </span>
                    <span class="价格">
                  60 富吾币
                </span>
                    <span class="原价">
                  300 富吾币
                </span>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="通识" name="2">
              <el-row>
                <el-col :span="12">
                  <el-row style="margin-left: 100px;margin-top: 40px;height: 200px;">
                    <el-col :span="10">
                      <img :src="cover" width="300" height="200" alt="" @click="goToCurriculumVideo">
                    </el-col>
                    <el-col :span="14">
                      <el-row class="视频标题">
                        <div @click="goToCurriculumVideo">视频标题</div>
                      </el-row>
                      <el-row class="视频简介">
                        视频简介
                      </el-row>
                    </el-col>
                    <span class="底端">
                  共 10 节
                  <el-divider direction="vertical"></el-divider>
                  10000人购买
                </span>
                    <span class="价格">
                  60 富吾币
                </span>
                    <span class="原价">
                  300 富吾币
                </span>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row style="margin-left: 100px;margin-top: 40px;height: 200px;">
                    <el-col :span="10">
                      <img :src="cover" width="300" height="200" alt="" @click="goToCurriculumVideo">
                    </el-col>
                    <el-col :span="14">
                      <el-row class="视频标题">
                        <div @click="goToCurriculumVideo">视频标题</div>
                      </el-row>
                      <el-row class="视频简介">
                        视频简介
                      </el-row>
                    </el-col>
                    <span class="底端">
                  共 10 节
                  <el-divider direction="vertical"></el-divider>
                  10000人购买
                </span>
                    <span class="价格">
                  60 富吾币
                </span>
                    <span class="原价">
                  300 富吾币
                </span>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="理财" name="3">
              <el-row>
                <el-col :span="12">
                  <el-row style="margin-left: 100px;margin-top: 40px;height: 200px;">
                    <el-col :span="10">
                      <img :src="cover" width="300" height="200" alt="" @click="goToCurriculumVideo">
                    </el-col>
                    <el-col :span="14">
                      <el-row class="视频标题">
                        <div @click="goToCurriculumVideo">视频标题</div>
                      </el-row>
                      <el-row class="视频简介">
                        视频简介
                      </el-row>
                    </el-col>
                    <span class="底端">
                  共 10 节
                  <el-divider direction="vertical"></el-divider>
                  10000人购买
                </span>
                    <span class="价格">
                  60 富吾币
                </span>
                    <span class="原价">
                  300 富吾币
                </span>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row style="margin-left: 100px;margin-top: 40px;height: 200px;">
                    <el-col :span="10">
                      <img :src="cover" width="300" height="200" alt="" @click="goToCurriculumVideo">
                    </el-col>
                    <el-col :span="14">
                      <el-row class="视频标题">
                        <div @click="goToCurriculumVideo">视频标题</div>
                      </el-row>
                      <el-row class="视频简介">
                        视频简介
                      </el-row>
                    </el-col>
                    <span class="底端">
                  共 10 节
                  <el-divider direction="vertical"></el-divider>
                  10000人购买
                </span>
                    <span class="价格">
                  60 富吾币
                </span>
                    <span class="原价">
                  300 富吾币
                </span>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="地产" name="4">
              <el-row>
                <el-col :span="12">
                  <el-row style="margin-left: 100px;margin-top: 40px;height: 200px;">
                    <el-col :span="10">
                      <img :src="cover" width="300" height="200" alt="" @click="goToCurriculumVideo">
                    </el-col>
                    <el-col :span="14">
                      <el-row class="视频标题">
                        <div @click="goToCurriculumVideo">视频标题</div>
                      </el-row>
                      <el-row class="视频简介">
                        视频简介
                      </el-row>
                    </el-col>
                    <span class="底端">
                  共 10 节
                  <el-divider direction="vertical"></el-divider>
                  10000人购买
                </span>
                    <span class="价格">
                  60 富吾币
                </span>
                    <span class="原价">
                  300 富吾币
                </span>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row style="margin-left: 100px;margin-top: 40px;height: 200px;">
                    <el-col :span="10">
                      <img :src="cover" width="300" height="200" alt="" @click="goToCurriculumVideo">
                    </el-col>
                    <el-col :span="14">
                      <el-row class="视频标题">
                        <div @click="goToCurriculumVideo">视频标题</div>
                      </el-row>
                      <el-row class="视频简介">
                        视频简介
                      </el-row>
                    </el-col>
                    <span class="底端">
                  共 10 节
                  <el-divider direction="vertical"></el-divider>
                  10000人购买
                </span>
                    <span class="价格">
                  60 富吾币
                </span>
                    <span class="原价">
                  300 富吾币
                </span>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="股票" name="5">
              <el-row>
                <el-col :span="12">
                  <el-row style="margin-left: 100px;margin-top: 40px;height: 200px;">
                    <el-col :span="10">
                      <img :src="cover" width="300" height="200" alt="" @click="goToCurriculumVideo">
                    </el-col>
                    <el-col :span="14">
                      <el-row class="视频标题">
                        <div @click="goToCurriculumVideo">视频标题</div>
                      </el-row>
                      <el-row class="视频简介">
                        视频简介
                      </el-row>
                    </el-col>
                    <span class="底端">
                  共 10 节
                  <el-divider direction="vertical"></el-divider>
                  10000人购买
                </span>
                    <span class="价格">
                  60 富吾币
                </span>
                    <span class="原价">
                  300 富吾币
                </span>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row style="margin-left: 100px;margin-top: 40px;height: 200px;">
                    <el-col :span="10">
                      <img :src="cover" width="300" height="200" alt="" @click="goToCurriculumVideo">
                    </el-col>
                    <el-col :span="14">
                      <el-row class="视频标题">
                        <div @click="goToCurriculumVideo">视频标题</div>
                      </el-row>
                      <el-row class="视频简介">
                        视频简介
                      </el-row>
                    </el-col>
                    <span class="底端">
                  共 10 节
                  <el-divider direction="vertical"></el-divider>
                  10000人购买
                </span>
                    <span class="价格">
                  60 富吾币
                </span>
                    <span class="原价">
                  300 富吾币
                </span>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="保险" name="6">
              <el-row>
                <el-col :span="12">
                  <el-row style="margin-left: 100px;margin-top: 40px;height: 200px;">
                    <el-col :span="10">
                      <img :src="cover" width="300" height="200" alt="" @click="goToCurriculumVideo">
                    </el-col>
                    <el-col :span="14">
                      <el-row class="视频标题">
                        <div @click="goToCurriculumVideo">视频标题</div>
                      </el-row>
                      <el-row class="视频简介">
                        视频简介
                      </el-row>
                    </el-col>
                    <span class="底端">
                  共 10 节
                  <el-divider direction="vertical"></el-divider>
                  10000人购买
                </span>
                    <span class="价格">
                  60 富吾币
                </span>
                    <span class="原价">
                  300 富吾币
                </span>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row style="margin-left: 100px;margin-top: 40px;height: 200px;">
                    <el-col :span="10">
                      <img :src="cover" width="300" height="200" alt="" @click="goToCurriculumVideo">
                    </el-col>
                    <el-col :span="14">
                      <el-row class="视频标题">
                        <div @click="goToCurriculumVideo">视频标题</div>
                      </el-row>
                      <el-row class="视频简介">
                        视频简介
                      </el-row>
                    </el-col>
                    <span class="底端">
                  共 10 节
                  <el-divider direction="vertical"></el-divider>
                  10000人购买
                </span>
                    <span class="价格">
                  60 富吾币
                </span>
                    <span class="原价">
                  300 富吾币
                </span>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="基金" name="7">
              <el-row>
                <el-col :span="12">
                  <el-row style="margin-left: 100px;margin-top: 40px;height: 200px;">
                    <el-col :span="10">
                      <img :src="cover" width="300" height="200" alt="" @click="goToCurriculumVideo">
                    </el-col>
                    <el-col :span="14">
                      <el-row class="视频标题">
                        <div @click="goToCurriculumVideo">视频标题</div>
                      </el-row>
                      <el-row class="视频简介">
                        视频简介
                      </el-row>
                    </el-col>
                    <span class="底端">
                  共 10 节
                  <el-divider direction="vertical"></el-divider>
                  10000人购买
                </span>
                    <span class="价格">
                  60 富吾币
                </span>
                    <span class="原价">
                  300 富吾币
                </span>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row style="margin-left: 100px;margin-top: 40px;height: 200px;">
                    <el-col :span="10">
                      <img :src="cover" width="300" height="200" alt="" @click="goToCurriculumVideo">
                    </el-col>
                    <el-col :span="14">
                      <el-row class="视频标题">
                        <div @click="goToCurriculumVideo">视频标题</div>
                      </el-row>
                      <el-row class="视频简介">
                        视频简介
                      </el-row>
                    </el-col>
                    <span class="底端">
                  共 10 节
                  <el-divider direction="vertical"></el-divider>
                  10000人购买
                </span>
                    <span class="价格">
                  60 富吾币
                </span>
                    <span class="原价">
                  300 富吾币
                </span>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="期货" name="8">
              <el-row>
                <el-col :span="12">
                  <el-row style="margin-left: 100px;margin-top: 40px;height: 200px;">
                    <el-col :span="10">
                      <img :src="cover" width="300" height="200" alt="" @click="goToCurriculumVideo">
                    </el-col>
                    <el-col :span="14">
                      <el-row class="视频标题">
                        <div @click="goToCurriculumVideo">视频标题</div>
                      </el-row>
                      <el-row class="视频简介">
                        视频简介
                      </el-row>
                    </el-col>
                    <span class="底端">
                  共 10 节
                  <el-divider direction="vertical"></el-divider>
                  10000人购买
                </span>
                    <span class="价格">
                  60 富吾币
                </span>
                    <span class="原价">
                  300 富吾币
                </span>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row style="margin-left: 100px;margin-top: 40px;height: 200px;">
                    <el-col :span="10">
                      <img :src="cover" width="300" height="200" alt="" @click="goToCurriculumVideo">
                    </el-col>
                    <el-col :span="14">
                      <el-row class="视频标题">
                        <div @click="goToCurriculumVideo">视频标题</div>
                      </el-row>
                      <el-row class="视频简介">
                        视频简介
                      </el-row>
                    </el-col>
                    <span class="底端">
                  共 10 节
                  <el-divider direction="vertical"></el-divider>
                  10000人购买
                </span>
                    <span class="价格">
                  60 富吾币
                </span>
                    <span class="原价">
                  300 富吾币
                </span>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="艺术品" name="9">
              <el-row>
                <el-col :span="12">
                  <el-row style="margin-left: 100px;margin-top: 40px;height: 200px;">
                    <el-col :span="10">
                      <img :src="cover" width="300" height="200" alt="" @click="goToCurriculumVideo">
                    </el-col>
                    <el-col :span="14">
                      <el-row class="视频标题">
                        <div @click="goToCurriculumVideo">视频标题</div>
                      </el-row>
                      <el-row class="视频简介">
                        视频简介
                      </el-row>
                    </el-col>
                    <span class="底端">
                  共 10 节
                  <el-divider direction="vertical"></el-divider>
                  10000人购买
                </span>
                    <span class="价格">
                  60 富吾币
                </span>
                    <span class="原价">
                  300 富吾币
                </span>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row style="margin-left: 100px;margin-top: 40px;height: 200px;">
                    <el-col :span="10">
                      <img :src="cover" width="300" height="200" alt="" @click="goToCurriculumVideo">
                    </el-col>
                    <el-col :span="14">
                      <el-row class="视频标题">
                        <div @click="goToCurriculumVideo">视频标题</div>
                      </el-row>
                      <el-row class="视频简介">
                        视频简介
                      </el-row>
                    </el-col>
                    <span class="底端">
                  共 10 节
                  <el-divider direction="vertical"></el-divider>
                  10000人购买
                </span>
                    <span class="价格">
                  60 富吾币
                </span>
                    <span class="原价">
                  300 富吾币
                </span>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="文本框">
          <el-row>
            <el-col :span="20">
              <el-input placeholder="搜索站内资讯、视频或用户" v-model="search" prefix-icon="el-icon-search"></el-input>
            </el-col>
            <el-col :span="4">
              <el-button type="primary">搜索</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="文本框" style="padding: 40px;">
          <div class="文本 居中">
            登录后可以保存您的浏览喜好、评论、收藏，并与APP同步，更可以发布富头条、视频与直播
          </div>
          <br/>
          <div class="居中" >
            <el-button type="primary" style="width:80%;">登录</el-button>
          </div>

        </div>
        <div class="文本框 居中">
          扫码下载富吾app
        </div>
        <div class="文本框">
          <div class="文本-中">
            更多
          </div>
        </div>
        <div class="文本框">
          <div class="文本-中">
            友情链接
          </div>
          <el-tabs v-model="activeName2">
            <el-tab-pane>
              <span slot="label" class="文本">综合</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">财经</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">银行</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">证券</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">保险</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">基金</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">房屋</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">收藏</span>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="文本框">
          <div class="文本-中">
            法规公布
          </div>
          <br/>
          <div class="文本">
            津ICP备2021000890号|广播电视节目制作经营许可证（津）字第1397号|地址：天津市津南区咸水沽镇金才园48号楼底商3-220-108
          </div>
        </div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search :'',
      activeName2: 0,
      activeName: 'first',
      src: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      cover:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F004%2F531%2F381%2F4339f96900344574a0c8ca272a7b8f27.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623913023&t=97ed8a2c3d3d9b15261f367e64df6339'
    };
  },
  methods: {
    goToCurriculumVideo(){
      this.$router.push('/Video/CurriculumVideo');
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    goHome(){
      this.$router.push('/');
    },
    goBack(){
      this.$router.push('/Video');
    }
  }
}
</script>

<style scoped>
.logo{
  width: 40px;
  height: 40px;
  margin-top: 10px;
}

.视频标题{
  font-size: 20px;
}

.视频简介{
  font-size: 20px;
  color: #707070;
}
.底端{
  position: absolute;
  bottom: 0;
  left: 370px;
  color: #707070;
}
.价格{
  position: absolute;
  bottom: 20px;
  left: 370px;
  font-size: 20px;
  color: #72adff;
}
.原价{
  position: absolute;
  bottom: 20px;
  left: 545px;
  font-size: 20px;
  color: #909399;
  text-decoration: line-through;
}

.背景 {
  background: #f8f7f7;
}

.页眉{
  height: 50px;
  background: #ffffff;
}

.标题 {
  font-size: 24px;
  text-align: center;
  color: red;
  margin-bottom: 8px;
  margin-top: 8px;
  font-weight: bold;
}
.小标题 {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.文本框 {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
  margin-bottom: 16px;
  margin-top: 16px;
}
</style>